<template>
	<view class="container">
		<view class="navlist">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="item" :class="{on:navindex == index}" v-for="(item,index) in navlist" :key="index"
					@click="chnageType(index)">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<view class="list">

			<view class="item" v-for="(item,index) in list" :key="index"
				@click="$pageTo(`/pages/index/orderData?id=${item.id}`)">
				<view class="i-top"
					v-if="(item.status == 1 || item.status == 2 || item.status == 3) && item.refundtime == 0">
					<view class="l1">
						<image src="../../static/image/of5.png" mode="aspectFill"></image>
						<text class="t2">预计</text>
						<text class="t1">{{getDay(item.upday)}}{{getDay3(item.uptime)}} </text>
						<text class="t2">可取餐</text>
					</view>
					<view class="r">
						{{slist[item.status]}}
					</view>

				</view>
				<view class="i-top2 u-flex u-col-center u-row-between" v-else>
					<view class="l">
						订单号：{{item.orderno}}
					</view>
					<view class="r" v-if="item.refundtime == 0">
						{{slist[item.status]}}
					</view>
					<view class="r" v-else>
						<block v-if="item.refund_status==1">未退款</block>
						<block v-if="item.refund_status==2">退款中</block>
						<block v-if="item.refund_status==3">退款成功</block>
					</view>
				</view>
				<view class="i-list">
					<view class="i-middle u-flex u-col-top u-row-between" v-for="(item2,index2) in item.orderdish"
						:key="index2">
						<view class="img">
							<image :src="http + item2.dish.image" mode="aspectFill"></image>
						</view>
						<view class="con">
							<view class="name">
								{{item2.dish_name}}
							</view>
							<view class="info" v-if="item2.spec_name">
								<view class="i">
									{{item2.spec_name}}
								</view>

							</view>
							<view class="info" v-if="item2.match_dish.length>0">
								<view class="i">
									x1 {{item2.dish.contain_title}}*{{item2.dish.contain_number}}份
								</view>
								<view class="i" v-for="(item3,index3) in item2.match_dish" :key="index3">
									x{{item3.number}} {{item3.dish_name}} <text
										v-if="item3.spec_name">({{item3.spec_name}})</text>
								</view>
							</view>
						</view>
						<view class="r">
							<view class="price" >
								￥<text>{{(item2.price/item2.number).toFixed(2)}}</text>
							</view>
							<view class="num">
								x{{item2.number}}
							</view>
						</view>
					</view>
				</view>

				<view class="i-footer u-flex u-col-center u-row-between">
					<view class="l" >
						合计￥<text>{{item.price}}</text>
					</view>
					<!-- "status": 1, //状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成 -->
					<view class="r  u-flex u-col-center  u-row-right">
						<view class="btn btn1" v-if="item.status == 1"
							@click.stop="changeOrder(item.id,index,'cancel')">
							取消订单
						</view>
						<view class="btn btn1" v-if="item.status != 1">
							查看详情
						</view>
						<view class="btn btn2" v-if="item.status == 1" @click.stop="changeOrder(item.id,index,'pay')">
							继续支付
						</view>
						<view class="btn btn2" v-if="item.status == 4"
							@click.stop="changeOrder(item.id,index,'confirm')">
							确认取餐
						</view>
						<view class="btn btn2" v-if="item.status ==2 && item.refundtime == 0"
							@click.stop="$pageTo(`/pages/index/applyRefund?id=${item.id}`)">
							申请退款
						</view>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="../../static/image/no.png" mode="aspectFill"></image>
				<text>暂无订单记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slist: ['已取消', '待支付', '待备餐', '备餐中', '待取餐', '已完成'],
				navlist: ['全部', '待支付', '待备餐', '备餐中', '待取餐', '已完成'],
				navindex: 0,
				uid: '',
				list: [],
				page: 1,
				nolist: false,
				http: this.$imgUrl,
				nodata: false,
				cartList: []
			}
		},
		onLoad() {
			if (!uni.getStorageSync('uid')) {
				this.login()
			} else {
				this.uid = uni.getStorageSync('uid')
			}

		},
		onShow() {
			console.log(getApp().globalData)
			let params = getApp().globalData.tabParams
			if (params) {
				this.navindex = params.status
				getApp().globalData.tabParams = null
			}
			this.page = 1
			this.list = []
			this.getlist()
		},
		onReachBottom() {
			if (this.nodata) {
				uni.showToast({
					title: '没有了',
					icon: "none"
				});
				return
			}
			this.page++
			this.getlist()
		},
		computed: {
			getDay3() {
				return (data) => {
					if (data == 1) {
						return '11:00前'
					}
					if (data == 2) {
						return '14:00前'
					}
					if (data == 3) {
						return '18:00前'
					}
					if (data == 4) {
						return '20:00前'
					}
				}
			},
			getDay() {
				return (data) => {
					// 获取当前日期
					let today = new Date();

					// 获取明天的日期
					let tomorrow = new Date(today);
					tomorrow.setDate(tomorrow.getDate() + 1);

					// 获取后天的日期
					let dayAfterTomorrow = new Date(today);
					dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);

					// 格式化日期函数（YYYY-MM-DD）
					function formatDate(date) {
						let year = date.getFullYear();
						let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
						let day = String(date.getDate()).padStart(2, '0');
						return `${year}-${month}-${day}`;
					}
					if (data == formatDate(today)) {
						return '今天'
					} else if (data == formatDate(tomorrow)) {
						return '明天'
					} else if (data == formatDate(dayAfterTomorrow)) {
						return '后天'
					} else {
						return data.substring(5)
					}
				}
			}
		},
		methods: {
			login() {
				uni.login({
					provider: 'weixin',
					success: (r) => {
						console.log(r)
						if (r.errMsg == 'login:ok') {
							this.$http.post('/app/indexs/login', {
								code: r.code,
							}).then(res => {
								if (res.code == 0) {
									if (res.data.id) {
										this.uid = res.data.id
										uni.setStorageSync('uid', res.data.id)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										});
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})

						}
					},
					fail: (err) => {

					}
				})
			},
			chnageType(i) {
				if (this.navindex != i) {
					this.navindex = i
					this.page = 1
					this.list = []
					this.getlist()
				}
			},
			changeOrder(id, index, type) {
				let map = {
					pay: {
						content: '确认要支付此订单吗?',
						url: "/app/orders/payOrder",
						title: "支付成功",
						status: 2
					},
					cancel: {
						content: '确认要取消此订单吗?',
						url: "/app/orders/cancelOrder",
						title: "取消成功",
						status: 0
					},
					confirm: {
						content: '确认要取餐吗?',
						url: "/app/orders/confirmOrder",
						title: "取餐成功",
						status: 5
					}
				}
				let {
					content,
					url,
					title,
					status
				} = map[type]

				// "status": 1, //状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成 
				uni.showModal({
					title: '温馨提示',
					content: content,
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$http.post(url, {
								mid: this.uid,
								order_list_id: id.toString(),
							}).then(res => {
								console.log(res)
								if (res.code == 0) {

									if (type == 'pay') {
										let {
											timeStamp,
											nonceStr,
											paySign
										} = res.data
										let packagex = res.data.package
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: timeStamp,
											nonceStr: nonceStr,
											package: packagex,
											signType: 'MD5',
											paySign: paySign,
											success: (res) => {
												uni.showToast({
													title: title,
													icon: "none"
												});
												this.$set(this.list[index], 'status',
													status)
											},
											fail: function(err) {
												console.log('fail:' + JSON.stringify(err));
											}
										});
									} else {
										uni.showToast({
											title: title,
											icon: "none"
										});
										this.$set(this.list[index], 'status', status)
									}


								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							}).catch(err => {
								console.log('表单错误信息：', err);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			getlist() {

				// 状态 0已取消 1待支付 2待备餐 3备餐中 4已送达 5已完成

				this.$http.post('/app/orders/orderList', {
					mid: this.uid,
					page: this.page,
					status: this.navindex == 0 ? '-1' : this.navindex

				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.list = [...this.list, ...res.data.list]
						this.nolist = this.list.length == 0
						this.nodata = res.data.list.length == 0

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #E51B00;

	.container {
		.nolist {
			padding: 100rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-direction: column;

			image {
				width: 320rpx;
				height: 300rpx;
			}

			text {
				margin-top: 20rpx;
				height: 40rpx;
				line-height: 40rpx;


				font-size: 28rpx;
				color: #979797;
				text-align: center;

			}
		}

		.navlist {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			z-index: 998;


			.scroll-view_H {
				width: 100%;
				height: 100%;
				white-space: nowrap;

				.item {
					display: inline-block;

					font-size: 28rpx;
					color: #8E8E8E;
					text-align: center;
					margin-left: 50rpx;

				}

				.on {
					font-weight: 600;
					color: @color;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -30rpx;
						width: 60rpx;
						height: 4rpx;
						background: @color;
						border-radius: 2rpx;
					}
				}
			}
		}

		.list {
			padding: 120rpx 20rpx 20rpx;

			.item {
				padding: 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				background-color: #fff;

				.i-footer {
					padding-top: 20rpx;

					.l {
						text-align: left;
						height: 60rpx;
						line-height: 60rpx;

						font-size: 24rpx;
						color: #000000;

						text {
							font-size: 32rpx;
							font-weight: 600;

						}
					}

					.r {
						.btn {
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 28rpx;
							border-radius: 30rpx;
							border: 1rpx solid #DADADA;
						}

						.btn1 {
							border: 2rpx solid #DADADA;
							color: #000;
							margin-left: 20rpx;
						}

						.btn2 {
							border: 2rpx solid @color;
							background-color: @color;
							color: #fff;
							margin-left: 20rpx;
						}
					}

				}

				.i-top2 {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 32rpx;
					color: #979797;

					.l {}

					.r {}
				}

				.i-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.l1 {
						display: flex;
						align-items: center;

					}

					.r {
						font-size: 32rpx;
						color: #979797;
					}

					.t1 {
						font-size: 32rpx;
						color: @color;
					}

					.t2 {
						font-size: 32rpx;
						color: #000;
						margin-left: 10rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}

				.i-middle {
					border-bottom: 2rpx solid #eee;
					padding: 30rpx 0;

					.r {
						.price {
							height: 40rpx;
							color: #000000;
							font-size: 20rpx;

							text {
								font-size: 28rpx;
								font-weight: bold;
							}
						}

						.num {

							height: 40rpx;
							line-height: 40rpx;
							font-size: 28rpx;
							color: #7B7B7B;
							text-align: right;
						}
					}

					.img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.con {
						flex: 1;
						width: 1rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;

						.name {

							height: 30rpx;
							line-height: 30rpx;
							font-size: 28rpx;
							color: #000000;
							text-align: left;

						}

						.info {
							margin-top: 15rpx;

							.i {
								font-size: 24rpx;
								color: #B5B5BB;
								line-height: 40rpx;

								text {
									color: #E6A23C;
									margin-left: 6rpx;
									font-size: 20rpx;
								}
							}
						}

					}
				}

			}
		}
	}
</style>